Redux หลักการทำงาน 4 ขั้นตอน

หลักการทำงานของ Redux:

1. Store : เก็บสถานะปัจจุบันของแอปพลิเคชันทั้งหมด เปรียบเสมือนแหล่งข้อมูลกลาง

2. Actions : เป็นวัตถุที่อธิบายการเปลี่ยนแปลงที่จะเกิดขึ้นกับ State

3. Reducers : เป็นฟังก์ชันที่รับ Action และ State ปัจจุบัน

• คำนวณ State ใหม่

• ส่ง State ใหม่ไปยัง Store

4. Components : ส่วนสำคัญใน Redux ที่ใช้ในการแสดง UI และเชื่อมต่อกับ Store

• เชื่อมต่อกับ Store

• รับ State

• แสดงผลลัพธ์

+--------+ | ผู้ใช้ | --> ส่งการกระทำ (เหตุการณ์) | การกระทำ | +--------+ | v +--------+ +--------------+ | คลังข้อมูล | <---- | ตัวลด | | สถานะ | -----> | (ฟังก์ชันบริสุทธิ์)| +--------+ +--------------+ | v +--------+ +--------------+ | อินเตอร์เฟซ | <---- | คอมโพเนนต์ | (คอมโพเนนต์ React) | (เชื่อมต่อ Redux) | -----> | (เชื่อมต่อและเรนเดอร์)| +--------+

4 ขั้นตอนที่กำหนดไว้อย่างชัดเจนสำหรับการจัดการสถานะ

1. Actions : เป็นวัตถุ ที่อธิบายเหตุการณ์ที่เกิดขึ้นในแอปพลิเคชัน มักมีสองคุณสมบัติ :

• ประเภท (Type) : สตริงที่ระบุประเภทของการดำเนินการอย่างเดียวกัน

• ข้อมูลส่วนเพิ่ม (Payload) ตัวเลือก : ข้อมูลเพิ่มเติมใด ๆ ที่เกี่ยวข้องกับการดำเนินการ เช่น ID ค่า หรือข้อความข้อผิดพลาด

2. Reducers : ฟังก์ชันที่จะรับสถานะ หรือ ID ปัจจุบันของแอปพลิเคชัน และ Object การดำเนินการคืนค่าสถานะใหม่ ขึ้นอยู่กับประเภทของการดำเนินการ และข้อมูลเพิ่มเติมของ Reducers :

• Pure หรือ (Side Effects) : ไม่ควรแก้ไขสถานะที่มีอยู่โดยตรง แต่ควรสร้าง Object สถานะใหม่

มีความเด่นกาณี: โดยให้มีข้อมูลข้อมูลเดียวกัน (สถานะและการดำเนินการ) พวกเขาควรส่งผลลัพธ์เดียวกันเสมอ

• Deterministic : โดยให้มีข้อมูลข้อมูลเดียวกัน (สถานะ และการดำเนินการ) ควรส่งผลลัพธ์เดียวกันเสมอ

Input เดียวกัน (สถานะ และ Action) | Output เดียวกัน (สถานะใหม่)

3. Store (คลังข้อมูล) : เป็นแหล่งข้อมูลเดียวสำหรับสถานะแอปพลิเคชัน เก็บสถานะปัจจุบัน และให้วิธีการ

• ส่งการกระทำ (Dispatch Actions) : ช่วยให้ Components เรียกใช้การเปลี่ยนแปลงสถานะ โดยการส่ง Actions

• รับสถานะ (Get State) : ทำให้ Components สามารถเข้าถึงสถานะปัจจุบันของแอปพลิเคชันได้

• สมัครสมาชิกในการเปลี่ยนแปลง (Subscribe to Changes) : Components สามารถฟังการอัปเดตสถานะ และทำการ (Render) เรนเดอร์ใหม่ เมื่อสถานะเปลี่ยนแปลง

4. คอมโพเนนต์ (Components) : เป็นบล็อกสร้าง UI ที่สามารถส่งการกระทำ และเชื่อมต่อกับคลังข้อมูล

• ส่งการกระทำ (Dispatch Actions) : Components สามารถเรียกใช้การเปลี่ยนแปลงสถานะ โดยการส่ง Actions ไปยังคลังข้อมูล

• เชื่อมต่อกับคลังข้อมูล (Connect to Store) : Components สามารถเชื่อมต่อกับคลังข้อมูล Redux เพื่อเข้าถึงสถานะปัจจุบัน และสมัครสมาชิกเมื่อสถานะเปลี่ยนแปลง โดยเมื่อสถานะเปลี่ยนแปลง Components ที่เชื่อมต่อก็จะทำการ Render ใหม่โดยอัตโนมัติ พร้อมกับข้อมูลที่อัปเดต

อัพเดตข้อมูล : 16 มี.ค. 2567 11:02 : 117